<template>
    <div style="">
        <my-simple-table>

            <my-simple-tr label="基础功能">
                <el-rate v-model="value"></el-rate>
            </my-simple-tr>

            <my-simple-tr label="区分颜色 - 只读">
                <el-rate :colors="colors" v-model="value" disabled></el-rate>
            </my-simple-tr>

            <my-simple-tr label="辅助文字">
                <el-rate :allow-half="true" :colors="colors" v-model="value" :show-text="true" :texts="myText"></el-rate>
            </my-simple-tr>

            <my-simple-tr label="其它 icon">
                <el-rate :icon-classes="iconClasses" :allow-half="true" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" v-model="value" :show-text="true" :texts="myText"></el-rate>
            </my-simple-tr>

        </my-simple-table>
    </div>
</template>

<style>
</style>

<script>
    export default {
        data() {
            return {
                value : 3,
                colors: ['#99A9BF', '#F7BA2A', '#FF9900'],  // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
                myText: ['全部买入','买入80%','买入60%','买入50%','保持'],
                iconClasses: ['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3'] // 等同于 { 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }
            };
        },
        methods: {
        }
    }
</script>

